<template>
	<view class="container">
		<u-empty v-if="!popupTable.length" mode="data" text="暂无开台明细!"></u-empty>
		<view
            class="container-item"
            v-for="(ele, index) in popupTable"
            :key="index"
        >
			<view class="container-title margin-bottom-10">
				<text class="container-title-machine">{{ ele.machineCode }}</text>
				<u-tag :type="ele.openingState === 0 ? 'error' : ele.openingState === 1 ? 'warning' : ele.openingState === 2 ? 'primary' :ele.openingState === 3 ? 'success' : ele.openingState === 4 ? 'error' : '' "
				plain
				size="mini"
				class="flex-center"
				:text="ele.openingState === 0 ? '待下达' : ele.openingState === 1 ? '待翻盖' : ele.openingState === 2 ? '已翻改' : ele.openingState === 3 ? '已开台' : ele.openingState === 4 ? '已了机' : '' ">
				</u-tag>
			</view>
            <view style="position: absolute;right: 26rpx;top: 50%;width: 160rpx;height: 160rpx;margin-top: -80rpx;">
                <progress-chart
                    :val="ele.productionQty ? parseInt(((ele.completionQty || 0) / ele.productionQty) * 100) : 0"
                ></progress-chart>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">排产数量: </view>
                <text class="container-item-val">{{ele.productionQty}}</text>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">完工数量: </view>
                <text class="container-item-val">{{ele.completionQty}}</text>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">当班产量(M): </view>
                <text class="container-item-val">{{ele.currentShiftOutput}}</text>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">当班产量(KG): </view>
                <text class="container-item-val">{{ele.currentShiftQty}}</text>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">实际开台日期: </view>
                <text class="container-item-val">{{ele.startSystemTime || '无'}}</text>
            </view>
            <view class="container-item-son">
                <view class="container-item-label">实际了机日期: </view>
                <text class="container-item-val">{{ele.endSystemTime || '无'}}</text>
            </view>
            <view class="container-item-son">
				<view class="container-item-label">速度: </view>
				<text class="container-item-val">{{ele.rotateSpeed}}</text>
			</view>
			<view class="container-item-son">
				<view class="container-item-label">平均电流: </view>
				<text class="container-item-val">{{ele.avgElectricity == null ? '/' : ele.avgElectricity }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMachineDetail } from "../../api/index.js";
	import {showLoading } from "../../utils/jk-utils.js";
    import progressChart from "./progress-chart";
	export default {
        components: {
            progressChart
        },
		data(){
			return{
				popupTable: []
			}
		},
		onLoad(){
			const payload = uni.getStorageSync('rowKey');
			this.lookDetail(payload)
		},
		methods:{
			// 开台数据详情
			 lookDetail(payload){
				showLoading(true);
				getMachineDetail(payload.processList).then(res=>{
					showLoading(false);
					this.tranData(res.data.res)
				})
			},
			tranData(newVal){
				this.popupTable = [];
				if (newVal) {
					newVal.forEach(processItem => {
						if (processItem.processCode.toUpperCase() === 'XS' || processItem.processCode.toUpperCase() === 'LT') {
							processItem.productOrderMachineList.forEach(machineItem => {
								this.popupTable.push({
									processName: processItem.processName,
									...machineItem
								});
							});
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
    .u-percentage-slot {
        font-size: 24rpx;
    }
	/deep/.u-tag{
		width: 80rpx;
		height: 35rpx;
		display: inline-block;
	}
	.container {
		padding: 28rpx 32rpx;
		box-sizing: border-box;
        background: #f8f8f9;
		.container-title{
			display: flex;
			justify-content: space-between;
            align-items: center;
            //border-bottom: solid 1rpx #dcdee2;
            height: 72rpx;
            .container-title-machine {
                font-size: 36rpx;
                color: #17233d;
            }
		}
		.container-item{
			width: 100%;
			line-height: 50rpx;
			background: #fff;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			box-shadow: 0 0 6rpx 4rpx #e8eaec;
			border-radius: 15rpx;
			margin-bottom: 32rpx;
            font-size: 28rpx;
            position: relative;
			.container-item-son{
				display: flex;
                .container-item-val {
                    color: #515a6e;
                }
                .container-item-label{
                    width: 200rpx;
                    color: #888f9b;
                    margin-right: 8rpx;
                    display: inline-block;
                }
			}
		}
	}
</style>
